<template>
  <view class="page-container">
    <view class="page-header">
      <text class="title">用户登录</text>
    </view>
    
    <view class="form-content">
      <view class="input-group">
        <view class="input-box">
          <text class="iconfont icon-user"></text>
          <input 
            type="text" 
            v-model="username" 
            placeholder="请输入用户名"
            class="input"
          />
        </view>
      </view>
      
      <view class="input-group">
        <view class="input-box">
          <text class="iconfont icon-password"></text>
          <input 
            type="password" 
            v-model="password" 
            placeholder="请输入密码"
            class="input"
          />
        </view>
      </view>

      <button @tap="handleLogin" class="primary-btn" hover-class="button-hover">登 录</button>
      <view class="link-text" @tap="goToRegister">
        没有账号？立即注册
      </view>
    </view>

    <view class="page-footer">
      <text class="subtitle">登录即代表同意《用户协议》和《隐私政策》</text>
    </view>
  </view>
</template>

<script>
import { login } from '@/api/user'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    validateForm() {
      if (!this.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        })
        return false
      }
      
      if (!this.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    async handleLogin() {
      if (!this.validateForm()) return
      
      try {
        const res = await login({
          username: this.username,
          password: this.password
        })
        
        // 存储用户信息
        uni.setStorageSync('userInfo', {
          id: res.data,
          username: this.username
        })
        
        // 存储token
        uni.setStorageSync('token', res.token)
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/home/index'
          })
        }, 1500)
        
      } catch (error) {
        uni.showToast({
          title: error.message || '登录失败',
          icon: 'none'
        })
      }
    },
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/index'
      })
    },
    goToForget() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss">
.page-container {
  height: calc(100vh - 44px);
  padding: 0 40rpx;
  background: linear-gradient(135deg, #f6f7f9 0%, #ffffff 100%);
  box-sizing: border-box;
  position: relative;
  
  .page-header {
    text-align: center;
    padding: 40rpx 0;
    
    .title {
      font-size: 56rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .form-content {
    margin-top: 40rpx;
    
    .input-group {
      margin-bottom: 24rpx;
      
      .input-box {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 16rpx;
        padding: 0 30rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
        transition: all 0.3s;
        
        &:focus-within {
          background: #fff;
          box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.15);
          transform: translateY(-2rpx);
        }
        
        .iconfont {
          font-size: 40rpx;
          color: #007AFF;
          margin-right: 20rpx;
        }
        
        .input {
          flex: 1;
          height: 90rpx;
          border: none;
          font-size: 28rpx;
          background: transparent;
        }
      }
    }
    
    .primary-btn {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      background: linear-gradient(135deg, #0066FF 0%, #007AFF 100%);
      color: #fff;
      font-size: 32rpx;
      border-radius: 16rpx;
      margin-top: 40rpx;
      transition: all 0.3s;
      border: none;
      letter-spacing: 4rpx;
      
      &.button-hover {
        transform: translateY(2rpx);
        box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
      }
    }
    
    .link-text {
      margin-top: 24rpx;
      text-align: center;
      color: #007AFF;
      font-size: 28rpx;
      
      &:active {
        opacity: 0.8;
      }
    }
  }
  
  .page-footer {
    position: absolute;
    left: 40rpx;
    right: 40rpx;
    bottom: 40rpx;
    text-align: center;
    
    .subtitle {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style> 